<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    class App extends React.Component {
        state = {
            num: 0,
            name: "李四",
            age: 18
        }
        render() {
            console.log("渲染啦")
            console.log(this)
            return (
                <div>
                    <h1>setState特新---{this.state.num}---{this.state.name}----{this.state.age}</h1>
                    <button onClick={() => {
                        this.setState({
                            name: "张三"
                        });
                    }}>调用this.setState</button>
                    <button onClick={() => {
                        // 异步更新
                        this.setState({
                            num: 10
                        }, () => {
                            console.log("更新完了", this.state.num)
                        })
                        console.log(this.state.num)
                    }}>++</button>
                    <button onClick={() => {
                        setTimeout(() => {
                            // setState 是同步的过程
                            this.setState({
                                num: 5
                            })
                            console.log(this.state.num)
                        }, 1000)
                        //   window.onresize=()=>{
                        //     this.setState({
                        //             num:20
                        //         })
                        //         console.log(this.state.num)
                        //   }
                    }}>+5</button>

                    <button onClick={() => {
                        this.setState({
                            num: 100,
                        })
                        // 222/
                        //3423
                        this.setState({
                            name: "王五"
                        })
                        this.setState({
                            age: 28
                        })
                        // 在非react事件中 多个this.setState不会合并更新
                        setTimeout(() => {
                            this.setState({
                                num: 1000,
                            })
                            // 222/
                            //3423
                            this.setState({
                                name: "赵六"
                            })
                            this.setState({
                                age: 38
                            })
                        }, 5000)
                    }}>合并更新</button>
                </div>
            )
        }
    }

    ReactDOM.render(<App />, document.getElementById("root"))

    /*
    setState特性:
    1. setState 只有在更新状态才会调用render方法 若 只是单纯的调用了一下setState 没有改变状态render方法不会被调用.
    2. 在react18版本以下 setState既可以是同步的又可以是异步的
        同步：在不受react控制的事件中调用setState setState就是一个同步的过程 原生事件 setTimout ...
        异步： 在受react控制的事件中调用setState 他就是一个异步的过程 onClick

    3. 在react中多个setState会合并更新,在非react事件中 多个this.setState不会合并更新
    */


     /* 
    react 渲染过程：
    class类组件通过调用render方法生成虚拟DOM,再将虚拟DOM交给ReactDOM中render方法进行处理，将虚拟DOM转化为真实DOM并渲染到浏览器上。每次只要使用setState方法那么组件中的render方法就会从新调用，同时会再生成一个新的虚拟DOM树，新的虚拟DOM树与旧虚拟DOM树使用diff算法进行同级比较，只要发现有dom发生改变那么就会将改变的虚拟DOM转化为真实DOM并更新到浏览器上。
    */

    /* 
    setState特性：
    1. 每方法就会执调用一次setState方法 类组件中render行一次。
    2. 在同一个业务逻辑中react会自动将多个setState合并更新，也就是说无论写多少个setState render方法只会调用一次，利于性能优化。
    3. setState可以是同步的过程也可以是异步过程。
    3.1 当setState在受react事件控制时调用，那么setState就是一个异步的过程，参数二就是更新完成后的回调函数。
    3.2 当这个事件不受react控制时，那么setState就是同步的过程。例如：setTimeout、原生事件、监听事件....
    4. setState 在非react控制的事件中使用时，它不会将多个setState合并更新。
    */
</script>

</html>
